<template>
  <div class="bar-container" ref="chartRef"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
import * as echarts from 'echarts';

// 定义接收的参数类型
const props = defineProps({
  // 接收的数据格式：[{ label: string, value: number, color: string }, ...]
  data: {
    type: Array,
    required: true,
    validator: (val) => val.every(item =>
      item.label && typeof item.value === 'number' && item.color
    )
  },
  // 组件宽度
  width: {
    type: String,
    default: '100%'
  },
  // 组件高度
  height: {
    type: String,
    default: '400px'
  },
  // 柱子宽度
  barWidth: {
    type: Number,
    default: 35
  }
});

// 响应式变量
const chartRef = ref(null);
let chartInstance = null;

// 处理数据：提取label、value、计算最大值背景
const processData = () => {
  const labels = props.data.map(item => item.label);
  const values = props.data.map(item => item.value);
  const maxValue = Math.max(...values); // 最大值作为背景
  const backgroundData = values.map(() => maxValue); // 背景数据数组（全为最大值）
  const colors = props.data.map(item => item.color); // 每个柱子的颜色
  return { labels, values, backgroundData, colors, maxValue };
};

// 初始化/更新图表
const initChart = () => {
  if (!chartRef.value) return;

  // 处理数据
  const { labels, values, backgroundData, colors, maxValue } = processData();

  // 初始化图表实例
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value);
  }

  // 图表配置项
  const option = {
    grid: {
      left: '2%',
      right: '8%', // 右侧留更多空间显示数值
      bottom: '2%',
      top: '2%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'none' },
      formatter: (params) => {
        // 显示标签和对应值
        return `${params[0].name} : ${params[0].value}`;
      }
    },
    xAxis: {
      show: false,
      type: 'value',
      max: maxValue * 1.1, // 最大值的1.1倍，避免柱子顶满
      axisLabel: {
        color: '#FFFFFF',
        fontSize: 20,
        margin: 10 // 标签与x轴的距离，增强间距感
      },
      axisLine: {
        show: true,   // 是否显示轴线
        lineStyle: {
          color: '#ccc' // 轴线颜色
        }
      }
    },
    yAxis: [
      // 左侧Y轴：显示标签
      {
        type: 'category',
        inverse: true, // 倒序显示（第一个数据在最上方）
        axisLabel: {
          show: true,
          textStyle: { color: '#fff' }
        },
        axisLabel: {
          color: '#FFFFFF',
          fontSize: 20,
          margin: 10 // 标签与x轴的距离，增强间距感
        },
        axisLine: {
          show: true,   // 是否显示轴线
          lineStyle: {
            color: '#ccc' // 轴线颜色
          }
        },
        // axisTick: { show: false },
        data: labels
      },
      // 右侧Y轴：显示数值
      {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: { color: '#ffffff', fontSize: 24 }
        },
        data: values // 右侧显示对应数值
      }
    ],
    series: [
      // 前景柱子（实际值）
      {
        name: '值',
        type: 'bar',
        zlevel: 1, // 层级高于背景
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            // 每个柱子使用自定义颜色（支持渐变）
            color: (params) => {
              const color = colors[params.dataIndex];
              // 保持原有的渐变效果，使用传入的color作为基础色
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: color },
                { offset: 1, color: `${color}CC` } // 透明度稍低的同色
              ]);
            }
          }
        },
        barWidth: props.barWidth,
        data: values
      },
      // 背景柱子（最大值）
      {
        name: '背景',
        type: 'bar',
        barWidth: props.barWidth,
        barGap: '-100%', // 与前景柱子重叠
        data: backgroundData,
        itemStyle: {
          normal: {
            color: 'rgba(24,31,68,1)', // 固定背景色
            barBorderRadius: 30
          }
        }
      }
    ]
  };

  chartInstance.setOption(option);
};

// 监听数据变化，重新渲染图表
watch(
  () => props.data,
  () => {
    nextTick(initChart); // 确保DOM更新后再渲染
  },
  { deep: true }
);

// 监听窗口大小变化，自适应图表
const handleResize = () => {
  chartInstance?.resize();
};

// 生命周期
onMounted(() => {
  nextTick(() => {
    initChart();
    window.addEventListener('resize', handleResize);
  });
});

onBeforeUnmount(() => {
  // 销毁图表实例，移除事件监听
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.bar-container {
  width: v-bind(width);
  height: v-bind(height);
}
</style>